<template>
	<div class="NodealDetailPage">
		<HeaderTab>
			<div slot="left">
				<div class="glyphicon glyphicon-menu-left return_but" @click="backClick"></div>
			</div>
			<div slot="center" class="header_center">
				书籍详情页
			</div>
		</HeaderTab>
		<div class="Original_cover_pic">
			<img :src="floorOriginalCover">
		</div>
		<div class="Original_DetailPage_text">
			<h1 class="Original_DetailPage_title">{{book_itemsdata.book_name}}</h1>
			<p class="Original_DetailPage_author">作者：<a href="javascript:;">{{book_itemsdata.author}}</a></p>
			<p class="Original_DetailPage_tag">标签：
				<a href="javascript:;">{{book_itemsdata.book_type}}</a>
			</p>
			<p class="Original_DetailPage_special">专区：
				<a href="javascript:;">{{special_name}}</a>
			</p>
			<p class="Original_DetailPage_chapter_num">章节：共<a href="javascript:;">{{chapter_num}}</a>章</p>
			<p class="DetailPage_numb">编号：<span>SJXY-{{book_itemsdata.id}}</span></p>
			<div class="DetailPage_box">
				<ul>
					<li>
						<button class="btn btn-success DetailPage_readbut" @click="startReadClick()">开始阅读</button>
					</li>
				</ul>
			</div>
		</div>
		<div id="DetailPage_briefIntroduction">
			<div class="briefIntroduction">
				作品简介
			</div>
			<p class="Original_briefIntroduction_text">{{book_itemsdata.introduce}}</p>
		</div>
		<div class="chapter_box">
			<div class="chapter_title">所有章节</div>
			<ul>
				<li v-for="(j,index) in chapter_data" :key="index" @click="readClick(j)">
					<a href="javascript:;">
						<span class="glyphicon glyphicon-book chapter_logo"></span>
						{{j.chapter_title}}
						<span class="glyphicon glyphicon-menu-right Arrow_style"></span>
					</a>
				</li>
			</ul>
		</div>
		<div class="null_box"></div>
		<proTabBar></proTabBar>
	</div>
</template>

<script>
	import $ from 'jquery'
	import HeaderTab from 'common/HeaderTab/HeaderTab';
	import proTabBar from 'components/common/proTabBar.vue';

	export default {
		name: 'NodealDetailPage',
		components: {
			HeaderTab,
			proTabBar,
		},
		methods: {
			// 点击导航栏返回按钮返回上一个组件的效果实现
			backClick() {
				this.$router.back();
				// this.$router.go(-1); //效果也一样
			},

			// 开始阅读按钮点击效果实现,把该章节的id获取并传递到阅读页面
			startReadClick() {
				this.$router.push('/nodealReadPage/' + this.chapter_data[0].id)
			},

			// 阅读条目点击效果
			readClick(e) {
				this.$router.push('/nodealReadPage/' + e.id)
			},

			// 由书本id获取该书基本信息
			loadBookItemData() {
				var _self = this
				let NodealBook_id = _self.$route.params.id;
				_self.axios.get('http://192.168.43.169/api/nodealBook_query/' + NodealBook_id).then((response) => {
					let resdata = response.data;
					if (resdata.code == 200) {
						_self.book_itemsdata = resdata.data[0]
						_self.special_name = resdata.data[0].special_area
					}
				});
			},

			// 由书本id获取章节数
			loadBookChapterData() {
				// 获取上一个组件跳转过来时携带的query参数id($route是当前活动路由)
				let book_id = this.$route.params.id;
				this.axios.get('http://192.168.43.169/api/nodealBook_chapters/' + book_id).then((response) => {
					let chapters_data = response.data.data;
					this.chapter_data = chapters_data
					this.chapter_num = chapters_data.length
				});
			},
		},
		data() {
			return {
				id: null,
				book_itemsdata: [],
				chapter_data: [],
				chapter_num: null,
				items: [],
				relevant_books: [],
				special_name: '',
				Originalbook_cover: [require('../../assets/img/Original_cover/Original_cover_001.jpg'), require('../../assets/img/Original_cover/Original_cover_002.jpg')],
				floorOriginalCover: [],
			}
		},
		mounted() {
			this.floorOriginalCover = this.Originalbook_cover[Math.floor((Math.random()*this.Originalbook_cover.length))]
		},
		created() {
			this.loadBookItemData();
			this.loadBookChapterData();
		},
		watch: {
			// 监听,当路由地址发生改变时,再重新执行一次loadData()函数
			'$route'(to, from) {
				this.loadBookItemData();
				this.loadBookChapterData();

				document.body.scrollTop = document.documentElement.scrollTop = 0;
			}
		}
	}
</script>

<style>
	@import '~assets/css/OriginalDetailPage.css';
</style>
